<template lang="html">
  <div class="box">
    <header-title :titlemain='title'></header-title>
    <div class="orderdetails_main">
      <div class="shipment" v-for="(item,index) in goodsname">
        <div class="shopName">
            <h2 class="orderNumber">订单号:{{item.ordername}}</h2>
            <h3 class="orderStatus">待发货</h3>
        </div>
        <div class="commodity">
          <li class="goodsname_box" v-for="ietm in item.order_list">
            <img :src="ietm.goods_info.show_this_thumb" :alt="ietm.goods_info.show_this_title" class="goods_img">
            <p class="goodsname_main">{{ietm.goods_info.show_this_title}}</p>
            <p class="goods_pirce">￥{{ietm.goods_info.show_this_price}}</p>
            <p class="goods_num">*{{ietm.num}}</p>
          </li>
        </div>
        <h2 class="total" v-if="type[index] == true">共件商品{{item.total_num}}  合计：￥<span>{{item.total_money}}</span></h2>
        <div class="operation">
            <h3 class="update">等待发货</h3>
        </div>
        <ul class="goods_main_box" v-if="type[index] == false">
          
          <li class="goods_xioaji">
            <h2 class="total">共件商品{{item.total_num}}  合计：￥<span>{{item.total_money}}</span></h2>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import title from "../geren/header_title.vue";
export default {
  name: 'geren',
  data () {
    return {
      title:"合并订单",
      goodsname:[],
      type:{}
    }
  },
  methods:{
    mergeordershuju:(argument)=>{
      let boxmain = argument,
      cur_id = sessionStorage.getItem("cur_id"),
        sign = sessionStorage.getItem("sign"),
      _url = "/index.php?g=app&m=shopping&a=get_mergeorder_list",
      _data = {
        cur_id:cur_id,
        sign:sign
      };
      boxmain.$http.post(_url,_data).then(function(data){
          if(data.data.status== "1"){
            boxmain.goodsname = data.data.data.mergeorder_list;
            for (var i = 0; i < data.data.data.mergeorder_list.length; i++) {
              boxmain.type[i] = true;
            }
          }else {
            
          }
      },function(response){
          boxmain.$toast(response);
        })
    }
  },
  created:function(){
    let conent = this;
    conent.mergeordershuju(conent);
  },
  components:{
    'header-title':title
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.box{
    width: 100vw;
    .orderdetails_main{
      width: 100vw;
      .shipment{
        width:100%;
        border-top: solid 1px @color8;
        box-shadow: 0px 10px 10px @color8;
        .shopName,.commodity{
          width:@width;
          margin: 0 auto;
          border-bottom: solid 1px @color8;
          overflow: hidden;
          zoom:1;
        }
        .shopName{
          height: 10vw;
          line-height: 10vw;
          .orderNumber{
            float: left;
          }
          .orderStatus{
            float: right;
          }
        }
        .commodity{
          font-size: @h3_font_size;
          .goods_main_box{
            width: 100vw;
            font-size: @h1_font_size;
            border-top: solid 1px #fff;
            margin-top: 3vw;
            li{
              overflow: hidden;
              zoom:1;
            }
          }
          .goodsname_box{
            width: @width;
            height: 18vw;
            padding: 1.5vw 0vw;
            border-top: solid 1px #f4f4f4;
            font-size: @h3_font_size; 
            .goods_img,.goodsname_main{
              float: left;
            }
            .goods_img{
              width: 18vw;
              height: 18vw;
            }
            .goodsname_main{
              width:45vw;
              margin-left: 2vw;
            }
            .goods_pirce,.goods_num{
              float: right;
              text-align: right;
              width: 21vw;
            }
            .goods_pirce{
              color: @color;
            }
            .goods_num{
              margin-top: 3vw;
            }
          }
        }
        .total{
            width:@width;
            height: 10vw;
            line-height: 10vw;
            margin: 0 auto;
            border-bottom: solid 1px @color8;
            text-align: right;
            span{
              color: @color;
            }
          }
        .operation{
          width: 100%;
          height: 10vw;
          border-bottom: solid 1px @color8;
          box-shadow: 0px 10px 10px @color8;
          overflow: hidden;
          zoom:1;
          .update,.notsj_btn{
            padding: 1.5vw 4vw;
            border-radius: 1vw;
            border: solid 1px @color;
            margin-right: 4vw;
            margin-top: 1vw; 
            float: right;
          }
          .update{
            background-color: #e74c4c;
            color: #fff;
          }
          .notsj_btn{}
        }
      }
      .goods_xioaji{
        padding: 1.5vw 4vw 1.5vw 4vw;
        width: 100vw;
        font-size: @h1_font_size;
        border-top: solid 1px @color8;
        border-bottom: solid 1px @color8;
        .total{
          width: @width;
          height: 10vw;
          margin: 0;
          line-height: 10vw;
          text-align: right;
        }
      }
      .kehufan{
        width: @width;
        margin: 2vw auto;
        font-size: @h1_font_size;
        label{}
        input{
          width: 60vw;
        }
      }
    }
  }
</style>